import 'package:cunyutech_flutter_ui/src/text/main.dart';
import 'package:cunyutech_flutter_ui/src/theme/main.dart';
import 'package:flutter/material.dart';

class StepPointer extends CustomPainter {
  final List<String> steps;
  final double width;
  final int activeIndex;

  StepPointer({
    this.borderColor, 
    this.dartBorderColor, 
    this.shadowColor,
    this.steps,
    this.width,
    this.activeIndex
  }): assert(steps.length>1, "steps长度必须大于等于2");

  final Color borderColor;
  final Color dartBorderColor;
  final Color shadowColor;

  static double activeOutRadius = 23;
  static double activeInRadius = 17;

  static double defaultOutRadius = 18;
  static double defaultInRadius = 12;
  static double height = 60;
  static double borderWidth = 1;
  static double shadowWidth = 1;

  @override
  void paint(Canvas canvas, Size size) {
    int index = 0;
    int rowCount = steps.length;
    double rowItemWidth = width / rowCount;
    double n2 = rowItemWidth / 2;
    List<Offset> lineList = [];
    List<Offset> centerList = steps.map((item){
      Offset center = Offset(
        rowItemWidth*(index+1) - n2,
        height / 2
      );
      index = index + 1;
      return center;
    }).toList();

    final defaultGradient =
      LinearGradient(
        colors: [borderColor, dartBorderColor],
        begin: FractionalOffset(0, 0.5),
        end: FractionalOffset(1, 0.5),
      );

    final defaultGradient2 =
      LinearGradient(
        colors: [borderColor, dartBorderColor],
        begin: FractionalOffset(1, 0.5),
        end: FractionalOffset(0, 0.5),
      );

    /// 绘制圆
    index = 0;
    centerList.forEach((offsetCenter){
      final isActive = index == activeIndex;
      final radius = isActive ? activeOutRadius : defaultOutRadius;
      final radius2 =  isActive ? activeInRadius : defaultInRadius;

      final outerRadius = radius + shadowWidth;
      final innerRadius = radius - borderWidth - shadowWidth;

      /// 1. 绘制外圆
      final borderPaint = Paint()
        ..color = isActive ? borderColor : dartBorderColor
        ..style = PaintingStyle.stroke
        ..strokeWidth = borderWidth;

      canvas.drawCircle(offsetCenter, radius - borderWidth / 2, borderPaint);

      final shadowPaint = Paint()
            ..style = PaintingStyle.stroke
            ..color = shadowColor
            ..strokeWidth = shadowWidth
            ..maskFilter = MaskFilter.blur(BlurStyle.normal, shadowWidth);
      
      canvas.drawCircle(offsetCenter, innerRadius, shadowPaint);
      canvas.drawCircle(offsetCenter, outerRadius, shadowPaint);

      /// 2. 绘制内圆
      final backPaint = Paint()
        ..color = isActive ? borderColor : dartBorderColor
        ..style = PaintingStyle.fill;

      canvas.drawCircle(offsetCenter, radius2, backPaint);
      /// 3. 绘制线条
      if(index == 0) {
        lineList.add(offsetCenter + Offset(radius,0));
      } else if(index != rowCount-1) {
        lineList.add(offsetCenter - Offset(radius,0));
        lineList.add(offsetCenter + Offset(radius,0));
      } else {
        lineList.add(offsetCenter - Offset(radius,0));
      }
      if(index!=0) {
        final Offset start = lineList[(index-1)*2];
        final Offset end = lineList[(index-1)*2+1];
        final Rect arcRect = Rect.fromPoints(start+Offset(0, -0.5), end+Offset(0, 0.5));
        final linePaint = Paint()
          ..style = PaintingStyle.fill
          ..strokeWidth = borderWidth
          ..color = dartBorderColor;

        final prevActive = index - 1 == activeIndex;
        if(prevActive) {
          linePaint.shader = defaultGradient.createShader(arcRect);
        }
        if(isActive) {
          linePaint.shader = defaultGradient2.createShader(arcRect);
        }
        canvas.drawLine(start, end, linePaint);
      }
      index = index + 1;
    });
  }
  
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

class CYStep extends StatelessWidget {
  final List<String> steps;
  final double width;
  final int activeIndex;
  final double height;
  final EdgeInsetsGeometry margin;

  const CYStep({Key key, this.width, this.activeIndex = 0, this.steps, this.height = 60, this.margin }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var cs = CYThemeData.of(context);
    return Container(
      width: width,
      margin: margin,
      child: Column(
        children: <Widget>[
          Container(
            height: height,
            width: width,
            child: CustomPaint(
              size: Size(width, height),
              painter: StepPointer(
                steps: steps, 
                activeIndex: activeIndex, 
                width: width,
                borderColor: cs.primaryForeColor,
                dartBorderColor: cs.foreColorSystem.secondaryColor,
                shadowColor: cs.primaryColor.withOpacity(0.5)
              ),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: steps.map((text)=> CYParagraph(text, lineHeight: null, alignment: Alignment.center,)).toList(),
          )
        ],
      )
    );
  }
}